<template>
  <div class="body">
        <div style="border-right: 1px solid #e2e2e2 ; width: 17.205vw; height: 95vh;" >
           <div class="newFriend">
            <el-badge style=" width:80%; height: 60%;" :value="badge" :hidden="hidden">
                <div class="newFriend-button" @click="clearFirendList">
                    <div style=" font-weight: bold; font-size:1vw">待处理的好友请求</div>
                </div>
            </el-badge>
            </div>
            <div class="list">
                <div id="list-item" v-for="(p,index) in friendList" :key="index" class="list-item">
                    <div @click="getObject(p)" style="width:100%; height: 100%; display:flex;">
                        <el-image class="image-head" :src="p.image"/>
                    <div class=" list-item-text">
                        <div class="list-item-text-line" >{{p.name}}</div>
                    </div>
                    </div>

                </div>
                
            </div>
        </div>
        <div v-show="isAddFriend && !init" class="friend-add">
            <div v-for="(p,index) in addRequest" :key="index" class="add-list-item">
                    <el-image class="add-list-image-head" :src="p.image"/>
                    <div class="add-list-item-text">
                        <div class="add-list-item-text-line"  style=" height:45%; font-weight: bold; font-size:1vw" >{{p.name}}(uid:{{p.uid}} )</div>
                        <div class="add-list-item-text-line" >验证消息:&nbsp;&nbsp;&nbsp;请求添加你为好友</div>
                    </div>
                    <div class="decision">
                        <div @click="addFriend(p.uid)" class="decision-select" style=" margin: 3% 0% 5% 0%; background-color: #48d25f;">接受</div>
                        <div @click="refuseFriend(p.uid)" class="decision-select" style="background-color: rgb(205, 205, 205);">忽略</div>
                    </div>
            </div>
        </div>
        <div v-show="!isAddFriend && !init" style="width: 75.395vw; height: 95vh;">
            <div class="friend-info">
                <div class="search-data-head-image" :style="{backgroundImage:`url(${this.listHeadImage})`}" />
                <p class="search-data-head-name">{{listHeadName}}(uid:{{currentUid}})</p>
            </div>
            <hr style="width: 50%;"/>
            <div class="info-button">
                <div @click="sendMsg" class="add-button" style="background-color: #35d750; margin-right:1%">
                发消息
            </div>
            <div @click="disbandFriend" class="add-button" style="background-color: #d74835;">
                删除好友
            </div>
            </div>
        </div>
        <div v-if="init" style="width: 75.395vw; height: 95vh; display: flex; justify-content: center; align-items: center; " ><div class="init_left" /></div>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
    mounted(){
    },
    data(){
        return{   
            currentUid:null,
            listHeadImage:'',
            listHeadName:'',
            init:true,
            isAddFriend:false,
            thisObjectExist:null,
        }
    },
    computed: {
    // 计算属性来获取 Vuex 状态,data中无法实时监控vueX的变化
    badge() {
      return this.$store.state.addFriendMsg;
    },
    hidden() {
      // 如果没有未读消息就不要显示了  
      return this.$store.state.addFriendMsg<=0;
    },
    addRequest() { // 请求消息列表
      return this.$store.state.addFriendList;
    },
    friendList() { // 好友列表
      return this.$store.state.friendList;
    },
  },
    methods:{
        // 发消息
        sendMsg(){
            this.$store.commit("UPDATE_CHAT_OBJECT",{uid:this.currentUid,
                name:this.listHeadName,headImage:this.listHeadImage,isGroup:false,exist:this.thisObjectExist});
            this.$store.commit("UPDATE_HOME_INDEX",0)
            this.$store.commit("INIT_CHAT_MSG",[]) // 清空聊天内容
            this.$store.commit("INIT_MESSAGE_WINDOWS") // 撤销聊天框占位图
            this.$store.commit("INIT_MESSAGE_OLDSCROLL_HEIGHT"); // 清空旧聊天对象的高度数据
            this.$store.dispatch('getChatHistory',{vue:this,uid:this.currentUid,isGroup:false}); // 请求聊天记录数据
            this.$router.push({name:"chat"});
        },
        // 这里的uid在绑定时就已经给过默认值了,所以后续回调时传入的参数会从res开始赋值
        disbandFriendCallback(uid,res){
            if(res.code==200){
                this.init=true;
                this.$store.commit("DELET_ONE_FRIEND_OBJECT",uid)
                this.$store.commit("DELET_ONE_CHAT_LIST_OBJECT",uid)
                this.$message({
                    message: '删除成功!',
                    type: 'success'
                }); 
                return 
            }
            this.$message({
                message: res.msg,
                type: 'error'
            }); 
        },
        // 删除好友
        disbandFriend(){
            this.$store.commit('ADD_TASK',this.disbandFriendCallback.bind(this,this.currentUid))
        
            let proto =new this.$protobufClass.PackageInfo();
            let data = new this.$accountNumber.AccountNumber();
            data.setUid(this.currentUid); // 填充uid
            proto.setToken(localStorage.getItem("token"));
            proto.setAccountnumber(data);
            proto.setCallbackid(5); // 后端的处理事件id
            proto.setTaskid(this.$store.state.taskId); // 自己的任务id
            proto=proto.serializeBinary();
            this.$webSocketTools.send(this,proto)
        },
        getObject(p){
            this.listHeadImage=p.image
            this.listHeadName=p.name
            this.currentUid=p.uid
            this.init=false;
            this.isAddFriend=false
            this.thisObjectExist=p.exist
        },
        clearFirendList(){
            if(this.addRequest.length==0){
                this.$message({
                    message: '暂时没有请求哦',
                    type: 'success'
                }); 
            }
            this.init=false;
            this.isAddFriend=true
            this.$store.commit('CLEAR_FRIEND_OR_GROUP',false)

            // 发给服务端，修改已读数据
            let proto =new this.$protobufClass.PackageInfo();
            let data =new this.$addGroupOrFriendRequest.AddGroupOrFriendRequest();
            
            data.setUid(this.$store.state.userUid);
            data.setIsgroup(false);
            proto.setAddgrouporfriendrequest(data);
            proto.setCallbackid(7); // 后端的处理事件id
            proto=proto.serializeBinary();
            this.$webSocketTools.send(this,proto)
        },
        addFriendCallback(uid,res){
            if(res.code==200){
                this.$store.commit('DELET_ONE_ADD_FRIEND_OBJECT',uid)
                this.$message({
                    message: '操作成功!',
                    type: 'success'
                }); 
                return
            }
            console.log(res)
             this.$message({
                    message: res.msg,
                    type: 'warning'
            }); 
        },
        addFriend(uid){
            // 将对应任务添加进任务列表映射中,注意这里的任务id是1开始的，避免有些时候默认值是0的情况
            this.$store.commit('ADD_TASK',this.addFriendCallback.bind(this,uid))
        
            let proto =new this.$protobufClass.PackageInfo();
            let data = new this.$accountNumber.AccountNumber();
            data.setUid(uid); // 填充数据
            proto.setAccountnumber(data);
            proto.setToken(localStorage.getItem("token"));
            proto.setCallbackid(3); // 后端的处理事件id
            proto.setTaskid(this.$store.state.taskId); // 自己的任务id
            proto=proto.serializeBinary();
            this.$webSocketTools.send(this,proto)
        },
        refuseFriendCallback(uid,res){
            if(res.code==200){
                this.$store.commit("DELET_ONE_ADD_FRIEND_OBJECT",uid)
                this.$message({
                    message: '操作成功!',
                    type: 'success'
                }); 
                return 
            }
            this.$message({
                message: res.msg,
                type: 'error'
            });          
        },
        // 忽略(拒绝)该添加请求
        refuseFriend(uid){
            // 这里可以直接将这个uid作为默认值传给回调函数,后面调用回调时传入的数据会默认从第二个开始赋值
            this.$store.commit('ADD_TASK',this.refuseFriendCallback.bind(this,uid))
        
            let proto =new this.$protobufClass.PackageInfo();
            let data = new this.$accountNumber.AccountNumber();
            data.setUid(uid); // 填充uid
            proto.setAccountnumber(data);
            proto.setToken(localStorage.getItem("token"));
            proto.setCallbackid(6); // 后端的处理事件id
            proto.setTaskid(this.$store.state.taskId); // 自己的任务id
            proto=proto.serializeBinary();
            this.$webSocketTools.send(this,proto)
        }
  
    }

}
</script>


<style scoped>
.init_left{
    width: 30%;
    height: 50%;
    background-image: url('../../assets/list_logo.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.info-button{
    width: 100%;
    height: 3vw;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; 
    margin-top: 3%;
}
.add-button:hover{
    cursor: pointer;
}
.add-button{
    display: flex; 
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    width: 5.5vw;
    height: 2.5vw;
    font-size: 1vw;
    border-radius: 5px;
    color: #ffffff; 
}
.friend-info{
    padding-top: 5%;
    display: flex; 
    justify-content: center;
    align-content: center;
}
.search-data-head-image{
    background-size: cover;
    background-repeat: no-repeat;
    width: 5vw;
    height: 10vh;
    border-radius: 10px;
    margin-left: 5%;
}
.search-data-head-name{
    width: 18vw;
    height: 5vh;
    font-size: 1.5vw;
    margin-left: 3%;
}
.decision-select:hover{
    cursor: pointer;
}
.decision{
    font-size:1vw;
    width: 15%;
    height: 96%;
    margin-left:3%; 
}
.decision-select{
    align-content: center;
    border-radius: 5px; 
    text-align: center;
    width: 50%;
    height: 40%;
}
.add-list-item-text-line{
    white-space: nowrap;     /* 禁止换行 */
    overflow: hidden;        /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
    width: 100%; 
    height:50%; 
}
.add-list-image-head{
    border-radius: 5px;
    background-size: cover;
    background-repeat: no-repeat;
    width:10%;
    height: 100%;
}
.add-list-item-text{
    width: 70%;
    height: 100%; 
    padding: 0% 0% 0% 3%;
}
.add-list-item{
    width: 90%;
    height: 10%;
    display:flex;
    padding: 2% 0% 2% 2% ;
    border-bottom: 1px solid rgb(198, 198, 198);
    justify-content: center;
}
.friend-add{
    width: 75.395vw;
    height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
}
.newFriend:hover{
    cursor: pointer;
}
.newFriend-button{
    width: 100%;
    height: 100%;
    background-color: rgb(135, 230, 111);
    border-radius:10px ;
    display: flex;
    justify-content: center;
    align-items: center;
}
.newFriend{
    display: flex;
    background-color:  #F5F6FA;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10%;
}
#list-item:hover{
  /* 鼠标悬浮时给手展示的效果 */
  cursor: pointer;
  /* 选中时背景色改变 */
  background-color: #cacacc;
}
.image-head{
    border-radius: 5px;
    background-size: cover;
    background-repeat: no-repeat;
    width:25%;
    height: 100%;
}
.list-item-text-line{
    white-space: nowrap;     /* 禁止换行 */
    overflow: hidden;        /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
    width: 100%; 
    height:50%; 
    font-weight: bold;
    font-size:1vw
}
.list-item-text{
    width: 72%;
    height: 100%; 
    padding: 0% 0% 0% 3%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-item{
    border-radius: 5px;
    width: 92%;
    height: 8%;
    padding: 4% 0% 4% 5% ;
}
.list{
    border-radius: 5px 0px 0px 0px;
    overflow-y: scroll;
    width: 100%;
    height: 90%;
    background-color: #f2f2f7;
}
.body{
    display: flex;
    width: 92.6vw;
    height: 95.5vh;
    margin: 0vh 0vh 0vh 1vw;
    border-radius: 30px 30px 0px 30px;
}
.message{
    width: 75.395vw;
    height: 95vh;
}
</style>